<template>
  <div class="card-out-container">
    <!--筛选条件-->
    <a-form layout="inline" v-if="showMore" class="multi-line-search-form">
      <a-form-item :label="$t('deviceManage.workShop')">
        <a-input v-model:value.trim="queryParam.universal" :placeholder="$t('deviceManage.workShopCode') + '/' + $t('deviceManage.workShopName')" allowClear />
      </a-form-item>
      <a-form-item :label="$t('common.createTime')">
        <a-range-picker v-model:value="queryParam.time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
          <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <CustomTable :operateMargin="true" storeTableName="groupTable" rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :rowSelection="isEnvLocal ?null:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,  fixed: 'left'}" :pagination="ipagination" @change="handleTableChange" :scroll="{y: 'calc(100vh - 390px)'}" :showMore="showMore">
      <template #operateLeft>
        <div class="operate-left">
          <a-button v-if="isEnvLocal" type="primary" @click="syncData(syncDataAry)">{{ $t('common.sync') }}</a-button>
          <span v-else>
            <a-button type="primary" @click="modalDo({},'addForm')">{{ $t('common.add') }}</a-button>
            <a-button type="warning" ghost :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{ $t('common.delMore') }}</a-button>
          </span>
        </div>
      </template>

      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button :placeholder="$t('deviceManage.workShopCode')+'/'+$t('deviceManage.workShopName')" v-if="!showMore" @search="loadData" />
          <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{ $t('common.highFilter') }}</a-button>
        </div>
      </template>

      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'code'">
          <span class="code-link" @click="handleDrawDetail(scope.record)">{{scope.record.code}}</span>
        </template>
        <template v-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="modalDo({...scope.record},'editForm',true)">{{ $t('common.editor') }}</a-button>
            <a-divider type="vertical" />
            <a-button type="link" class="warning-link" @click="handleDelete(scope.record.id)">{{ $t('common.del') }}</a-button>
          </span>
        </template>

      </template>
    </CustomTable>
    <!--弹窗-->
    <add-dialog ref="addForm" @ok="modalFormOk"></add-dialog>
    <edit-dialog ref="editForm" @ok="modalFormOk"></edit-dialog>
    <detail-draw ref="detailForm"></detail-draw>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import DetailDraw from './modules/detailDraw.vue'
import AddDialog from './modules/addDialog.vue'
import EditDialog from './modules/editDialog.vue'
import CustomTable from '@/components/commonTable/customTable.vue'
import { localColumns, normalColumns } from './modules/config'
import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
export default {
  name: 'hangLineGroup',
  mixins: [ListMixinPm],
  components: {
    EditDialog,
    AddDialog,
    DetailDraw,
    CustomTable,
    SyncDataModal
  },
  data () {
    return {
      url: {
        list: '/api/device/hanger-line-group/Page',
        delete: '/api/device/hanger-line-group/delete',
        save: '/api/device/hanger-line-group/save',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      fuzzySearchName: 'universal',
      syncDataAry: [{ syncIotCloudDataType: 'ihs:device:hangerLineGroup' }]
    }
  },
  methods: {
    checkboxProps (record) {
      return {
        disabled: record.isDelete != true
      }
    },
  },
  created () {
    this.columns = this.isEnvLocal ? localColumns : normalColumns
  }
}
</script>
